import { ref, onMounted, onUnmounted } from 'vue'

import useEventListener from './useEventListener'

function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function updatePosition(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // onMounted(() => {
  //   window.addEventListener('mousemove', updatePosition, false)
  // })
  // onUnmounted(() => {
  //   window.removeEventListener('mousemove', updatePosition, false)
  // })

  useEventListener(window, 'mousemove', updatePosition)

  return {
    x,
    y
  }
}

export default useMouse
